<!-- 登录 -->
<template>
  <main class="page-login">
    <div class="bg">
      <BgSvg width="100%" height="100%" color="#2c3142"></BgSvg>
    </div>
    <div class="my-login">
      <div>
        <img class="width" src="../assets/img/logo.png" />
      </div>
      <LoginForm class="margin-top-40" />
    </div>
  </main>
</template>
<script setup lang="ts">
import PageHeader from "@/components/PageHeader.vue";
import PageFoot from "@/components/PageFoot.vue";
import LoginForm from "@/components/loginForm.vue";
import Icon from "@/components/Icon.vue";
import BgSvg from "@/components/svg/BgSvg.vue";
</script>
<style scoped>
.page-login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  position: relative;
  background-color: #fff;
  overflow: hidden;
}

.bg {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 90%;
  transform: rotate(180deg) scaleY(-1);
}

.my-login {
  position: absolute;
  right: 400px;
  top: 40%;
  width: 300px;

  z-index: 10;
}
</style>
